<template>
  <el-card class="access" shadow="hover">
    <template #header>
      <i icon="line-chart-line" />
      <el-link :underline="false" @click="msg">我的消息</el-link>
      <el-tag class="card-header-tag" type="success">
        <count-to :start-val="0" :end-val="newMsgsNum" :duration="3000" class="card-panel-num" />
      </el-tag>
    </template>
    <el-tabs v-model="activeName">
      <el-tab-pane name="new_msg">
        <span slot="label">
          新消息
          <el-badge :value="newMsgsNum" class="item" />
        </span>
        <div v-for="item in new_msgs" :key="item.id" style="padding-left:5px;">
          <el-link :underline="false" class="title" @click="msgDetail(item)">{{ item.title }}</el-link>
        </div>
        <div v-if="new_msgs.length==0" style="text-align: center;padding-top: 30px;">
          暂无消息
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史消息" name="old_msg">
        <div v-for="item in old_msgs" :key="item.id" style="padding-left:5px;">
          <el-link :underline="false" class="title" @click="msgDetail(item)">{{ item.title }}</el-link>
        </div>
        <div v-if="old_msgs.length==0" style="text-align: center;padding-top: 30px;">
          暂无消息
        </div>
      </el-tab-pane>
    </el-tabs>
    <MsgDetail ref="msgDetail" />
  </el-card>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import * as api from '@/api/coder/msg'
  import MsgDetail from '@/views/coder/msg/detail'
  import CountTo from 'vue-count-to'

  export default {
    components: {
      MsgDetail,
      CountTo
    },
    data() {
      return {
        activeName: 'new_msg',
        new_msgs: [],
        old_msgs: [],
        newMsgsNum: 0
      }
    },
    created() {
      this.getNewMsgs()
      this.getOldMsgs()
    },
    methods: {
      getNewMsgs() {
        api.getMsgList(0, 10).then(res => {
          this.new_msgs = res.list
          this.newMsgsNum = res.totalResult
        })
      },
      getOldMsgs() {
        api.getMsgList(1, 10).then(res => {
          this.old_msgs = res.list
        })
      },
      msgDetail(row) {
        this.$refs.msgDetail.show(row.no)
        api.detailRead(row.id)
      },
      msg() {
        this.$router.replace({
          path: '/redirect/msg'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .card {
    padding: 0 10px 10px 10px;
    min-height: 150px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
  }

  .dashboard-editor-container {
    padding: 20px;
    background-color: rgb(240, 242, 245);
    position: relative;
    height: 100vh;
  }

  .title {
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
